/*
 * @Author: luoyunhai
 * @Date: 2021-04-13 10:22:57
 * @LastEditors: kanglang
 * @LastEditTime: 2021-04-29 17:40:24
 * @Description: 完善个人资料
 */

import React from 'react';
import { View, StyleSheet, Text, SafeAreaView, Image, ScrollView } from 'react-native';
import { Button, Check, msg, FormInput } from '@/common';
import {
  px2dp,
  mainBgColorWhite,
  fontColorBlack,
  mainBgColorLightGray,
  priceColor,
  fontColorDeepGray,
} from '@/styles';
import { defaultIdCardBack, defaultIdCardFront } from '@/images';
import businessApi from '@/api/business';

const { Submit } = Button;

export default class CertiKnow extends React.Component {
  constructor(props) {
    super(props);
    const { navigation } = props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { checkType } = params;
    this.state = {
      checked: false,
      checkType,
      userInfo: {}
    };
  }

  componentDidMount() {
    businessApi.getcustInfo().then(res => {
      if (res.success) {
        console.log('=========res==========>', res);
        this.setState({ userInfo: res.data });
      }
    });
  }

  render() {
    const { checked, userInfo, checkType } = this.state;
    const userInfoFlag = userInfo && JSON.stringify(userInfo) != '{}';
    return (
      <SafeAreaView style={styles.container}>
        <ScrollView style={styles.inner}>
          <View style={styles.firstPart}>
            <FormInput
              label={this.formItem('姓名')}
              labelWidth={{ width: px2dp(200) }}
              inputType={1}
              maxLength={20}
              disabled
              textStyles={{ textAlign: 'left', color: fontColorBlack }}
              boxStyle={{ height: 60 }}
              defaultValue={userInfoFlag && userInfo.name}
              onChange={(value) => {
                this.onChange('name', value);
              }}
            />
            <FormInput
              label={this.formItem('证件号码')}
              labelWidth={{ width: px2dp(200) }}
              inputType={1}
              maxLength={20}
              disabled
              textStyles={{ textAlign: 'left', color: fontColorBlack }}
              boxStyle={{ height: 60 }}
              defaultValue={userInfoFlag && userInfo.citizenIdNumber}
              onChange={(value) => {
                this.onChange('citizenIdNumber', value);
              }}
            />
            <FormInput
              label={this.formItem('手机号码')}
              labelWidth={{ width: px2dp(200) }}
              inputType={1}
              maxLength={20}
              disabled
              textStyles={{ textAlign: 'left', color: fontColorBlack }}
              boxStyle={{ height: 60 }}
              defaultValue={userInfoFlag && userInfo.mobile}
              onChange={(value) => {
                this.onChange('mobile', value);
              }}
            />
          </View>
          <View style={styles.firstPart}>
            <View style={styles.idLabel}>
              <Text>{this.formItem('添加身份证')}</Text>
            </View>
            <View style={styles.idCardWrap}>
              <Image
                style={[styles.idCardImg, { marginRight: px2dp(20) }]}
                source={userInfoFlag && userInfo.identityCardFrontId ? { uri: userInfo.identityCardFrontId } : defaultIdCardFront}
              />
              <Image
                style={styles.idCardImg}
                source={userInfoFlag && userInfo.identityCardBackId ? { uri: userInfo.identityCardBackId } : defaultIdCardBack}
              />
            </View>
          </View>
        </ScrollView>
        {
          checkType == 'add' &&
          <View style={styles.btnWrap}>
            <Submit
              boxStyle={{
                borderRadius: px2dp(8),
                width: '85%',
              }}
              btnTextStyle={{ fontSize: px2dp(36) }}
              text='提交'
              onClick={() => {
                this.submit();
              }}
            />

            <View style={styles.xycontainer}>
              <Check
                style={styles.check}
                checked={checked}
                onCheck={this.switchChecked}
              />
              <Text style={styles.text1}>
                我已阅读并同意签署
                <Text
                  style={styles.text2}
                  onPress={() => {
                    msg.emit('router: goToNext', {
                      routeName: 'CustAgreement',
                      routerFrom: 'PersonCertAgreement',
                    });
                  }}
                >
                  《用户注册协议》
                </Text>
              </Text>
            </View>
          </View>
        }
      </SafeAreaView>
    );
  }

  submit = () => {
    const { checked } = this.state;
    if (!checked) {
      msg.emit('app:tip', { text: '请勾选《用户注册协议》' });
      return;
    }

    businessApi.custAuthentication().then(res => {
      if (res.success) {
        msg.emit('app:tip', { text: '提交成功' });
        msg.emit('router: refreshRoute', {
          routeName: 'InsuranceTab',
        });
        msg.emit('router: refreshRoute', {
          routeName: 'B2BMallTab',
        });
        msg.emit('router: back');
      } else {
        msg.emit('app:tip', { text: '提交失败，请重试' });
      }
    });
  }

  switchChecked = () => {
    const { checked } = this.state;
    this.setState({ checked: !checked });
  };

  formItem = (name) => {
    return (
      <>
        <Text style={{ color: priceColor }}>＊</Text>
        <Text style={{ color: fontColorDeepGray, fontSize: px2dp(28) }}>
          {name}
        </Text>
      </>
    );
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: mainBgColorLightGray,
  },
  inner: {
    flex: 1,
    backgroundColor: mainBgColorLightGray,
  },
  firstPart: {
    backgroundColor: mainBgColorWhite,
    paddingHorizontal: px2dp(32),
    marginTop: px2dp(20),
  },
  idCardWrap: {
    flexDirection: 'row',
    padding: px2dp(32),
  },
  idCardImg: {
    flex: 1,
    height: px2dp(179),
    borderRadius: px2dp(20),
  },
  idLabel: {
    marginTop: px2dp(40),
  },
  btnWrap: {
    alignItems: 'center',
    marginBottom: px2dp(40),
  },
  xycontainer: {
    flexDirection: 'row',
    marginTop: px2dp(40)
  },
  check: {
    width: px2dp(32),
    height: px2dp(32),
    top: px2dp(4),
    marginRight: px2dp(10),
  },
  text1: {
    color: '#666564',
    fontSize: px2dp(24),
    lineHeight: px2dp(36),
  },
  text2: {
    color: '#BA914A',
    fontSize: px2dp(24),
  },
});
